<template>
  <view class="item" v-for="(lottery, index) in lotteries" :class="type[index]">
    <view class="item-header">
      <view class="item-top">
        <view class="item-top-left">预测时间：{{date}} </view>
      </view>
      <view class="line-border-bottom"> </view>
      <div class="lottery-numbers">
        <span class="lottery-number">{{lottery.ball1}}</span>
        <span class="lottery-number">{{lottery.ball2}}</span>
        <span class="lottery-number">{{lottery.ball3}}</span>
      </div>
      <view class="item-sub-title"> 和值: {{ lottery.sum }} </view>
      <view class="item-sub-title"> 差值: {{ lottery.difference }} </view>
      <view class="item-sub-title"> 规则说明: {{ lottery.msg }} </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  list: {
    type: Array,
    default: [],
  },
});
import dayjs from 'dayjs';
import {onMounted, ref} from "vue";
import {ballApi} from "../../../api/business/ball/ball-api";
//双色球开奖列表
const lotteries = ref([
  {
    "id": 2634,
    "phase": 24051,
    "red1": 5,
    "red2": 9,
    "red3": 13,
    "red4": 20,
    "red5": 23,
    "red6": 28,
    "blue": 6
  },
  {
    "id": 2633,
    "phase": 24050,
    "red1": 1,
    "red2": 3,
    "red3": 7,
    "red4": 10,
    "red5": 22,
    "red6": 33,
    "blue": 2
  },
  // ...其他彩票信息
])

onMounted(() => {
  ballApi.forecast3d().then(res => {
    if (res.ok) {
      lotteries.value = res.data;
    }
  });
});
const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
const type = [
  'primary',
  'warning',
  'info',
  'danger',
  'success'
];
</script>

<style lang="scss" scoped>
.list-view {
  margin: 20rpx 24rpx;
}

.item {
  .item-header {
    padding: 0 30rpx;
  }

  box-sizing: border-box;
  width: 700rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
  padding-top: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;

  .item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .item-top-left {
      font-size: 28rpx;
      font-weight: 400;
      color: #777777;
    }

    .item-top-right {
      .tag {
        width: 112rpx;
        height: 40rpx;
        border-radius: 4rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;

        &[type='warring'] {
          color: #ff6c00;
          background: #fff0ed;
        }

        &[type='success'] {
          color: $uni-color-success;
          background: #f7f8f9;
        }
      }
    }
  }

  .item-title {
    margin-top: 20rpx;
    margin-bottom: 12rpx;
    font-size: 34rpx;
    font-weight: 700;
    color: #444444;
  }

  .item-sub-title {
    font-size: 28rpx;
    color: #777777;
    margin-top: 20rpx;

    &:last-child {
      padding-bottom: 20rpx;
      margin-bottom: 0;
    }
  }

  .order-end-time {
    height: 40rpx;
    background: #ff6c00;
    box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    line-height: 40rpx;
  }
}

.lottery-numbers {
  display: flex;
  justify-content: center;
  margin: 20rpx;
}

.lottery-number {
  display: inline-block;
  padding: 5px 5px;
  margin: 0 8px;
  background-color: #ff3924;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: white;
}

.line-border-bottom {
  border-bottom: 1rpx solid #ededed;
}
</style>

